<template>
  <!-- <LoderAnimation /> -->
  <header>
    <HeaderNav />
  </header>
  <!-- 功能 -->
  <div class="vr-fun"></div>
  <!-- 楼层 -->
  <div class="vr-libfloor">
    <ul>
      <li
        v-for="(item, index) in floorMap"
        :key="item.floorNo"
        :class="{ active: isActive === index }"
        @click="actIndex(index, item.floorNo, item.floor)">
        {{ item.floor }}
      </li>
    </ul>
  </div>
  <!-- 方向 -->
  <div id="cameraSpin-content" class="component-content vr-cameraSpin">
    <div class="cameraSpin">
      <div class="cameraSpin-direction">
        <div>N</div>
        <div>S</div>
        <div>W</div>
        <div>E</div>
      </div>
      <div class="cameraSpin-bg">
        <img src="@/assets/Vrlib/rotation-layout.png" alt="" class="cameraSpin-img" />
      </div>
    </div>
  </div>
  <div class="three-canvas" ref="AppModel" v-loading="loading"></div>
</template>
<script setup lang="ts">
import { World } from '@/utils/World';
import { Sky } from '@/utils/Sky';
import { encode } from '@/utils/arge-plug-in';
import { ModelLoader } from '@/utils/ModelLoader';
import { vrlibData } from '@/api/products';
import { useVrlibStore } from '@/stores/modules/vrlibStore';

interface Floor {
  floor: string;
  floorNo: string;
}

//数据声明
const loading = ref(false);
const AppModel: Ref<HTMLElement | null> = ref(null); //模型加载元素
const floorMap = ref<Floor[]>(); //楼层数据
const isActive: Ref<number> = ref(0); //楼层选择状态

//创建模型加载器
const world: World = new World();
const modelLoder: ModelLoader = new ModelLoader(world);

//pinia数据管理
const useStore = useVrlibStore();
const mlib = useStore.mlib!;
const floorNo = useStore.floorNo;
const floor = useStore.floor;
const floorindex = useStore.floorindex;

isActive.value = floorindex;
modelLoder.loadModelToScene(`models/${mlib}/${floor}/${mlib}.gltf`);
// modelLoder.loadModelToScene(`models/whut/F1/whut.gltf`);
const vrlib = (mlib: string, floor: string) => {
  const prdata = {
    a: `[Lib={{${mlib}}}][FloorNo={{${floor}}}]`,
  };
  vrlibData(prdata)
    .then((res) => {
      const list4 = res.vr_ifa_Lib_GetFloorMap_list4;
      const flootArry: Floor[] = [];
      for (let i = 0; list4.length > i; i++) {
        const floor = encode(list4[i].Floor);
        const floorNo = encode(list4[i].FloorNo);
        const flootObj = { floor: floor.replace(/[\u4e00-\u9fa5]/g, 'F'), floorNo: floorNo };
        flootArry.push(flootObj);
      }
      floorMap.value = flootArry;
    })
    .catch((error) => {
      console.log(error);
    });
};
const actIndex = (index: number, id: string, floor: string) => {
  if (floor == useStore.floor) {
    return false;
  }
  isActive.value = index;
  useStore.floor = floor;
  useStore.floorNo = id;
  useStore.floorindex = index;
  world.clearMode();
  loading.value = true;
  modelLoder.addModel(`models/${mlib}/${floor}/${mlib}.gltf`, () => {
    loading.value = false;
  });
  new Sky(world);
  vrlib(mlib, id);
};

onMounted(() => {
  vrlib(mlib, floorNo!);

  world.init(AppModel.value as HTMLElement);
});

onUnmounted(() => {
  world.destroy();
});
</script>
<style scoped lang="scss">
.vr-libfloor {
  position: absolute;
  right: 0;
  top: 50%;
  background: var(--bgcolor-white);
  padding: 3px 3px;
  border-radius: 30px;
  margin-right: 20px;
  z-index: 10;
  ul {
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      position: relative;
      padding: 10px 10px;
      border-radius: 50%;
      margin: 2px 0;
      cursor: pointer;
      &:hover {
        color: #148cdc;
        background: #d1e7ef47;
        &::after {
          content: '';
          top: 7px;
          right: 5px;
          display: inline-block;
          position: absolute;
          background-color: rgba(245, 0, 0, 0.605);
          width: 7px;
          height: 7px;
          border-radius: 50%;
        }
      }
      &.active {
        color: #148cdc;
        background: #d1e7ef47;
        &::after {
          content: '';
          top: 7px;
          right: 5px;
          display: inline-block;
          position: absolute;
          background-color: rgba(245, 0, 0, 0.605);
          width: 7px;
          height: 7px;
          border-radius: 50%;
        }
      }
    }
  }
}

.component-content {
  position: absolute;
  top: 70px;
  .cameraSpin {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 120px;
    height: 120px;
    margin-left: 10px;
    margin-top: 10px;
    .cameraSpin-direction {
      width: 100%;
      height: 100%;
      position: absolute;
      div {
        position: absolute;
        &:nth-child(1) {
          left: 55px;
        }
        &:nth-child(2) {
          left: 55px;
          bottom: 0;
        }
        &:nth-child(3) {
          left: 0px;
          top: 50px;
        }
        &:nth-child(4) {
          right: 0px;
          top: 50px;
        }
      }
    }
    .cameraSpin-bg {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      // pointer-events: none;
      // transition: transform 0.2s cubic-bezier(0, 0.51, 0.58, 0.99);
      z-index: 1;
      &::before {
        content: '';
        position: absolute;
        height: 80px;
        width: 80px;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, #ffffff 0%, #d9efff 100%);
        box-shadow: inset 0 -2px 10px #78cfff99;
        border-radius: 100%;
      }
      .cameraSpin-img {
        height: 65px;
        position: absolute;
        z-index: 1;
        transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
    }
  }
}
</style>
